<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/static/all.css">
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>
            todolist
        </h1>

        <ul>
            <li :class="item.done ? 'done' : ''" v-for="(item,index) in list" :key="index">
                <input type="checkbox"
                       :checked="item.done ? true : false"
                       @click.prevent="changeStatus(item.id,index)"
                />
                {{item.id}}
                {{item.title}}

                <a href="javascript:;" @click="remove(item.id,index)">删除</a>
            </li>
        </ul>

        <div>
            <input type="text" v-model="addInpVal" />
            <button @click="add">添加</button>
        </div>
    </div>


    <script>
        var app = new Vue({
            el:'#app',
            data: {
                list: [],
                addInpVal: ''
            },
            created: function(){
                this.apiGetList()
            },
            methods: {
                // 获取列表数据
                apiGetList () {
                    fetch('/todos').then(res => {
                        return res.json();
                    }).then(datas => {
                        console.log('datas', datas)
                        if(!datas.code){ // 或者写成 datas.code === 0
                            this.list = datas.data
                        }
                    })
                },
                // 改变状态
                changeStatus (id, index) {
                    fetch('/change',{
                        method:'post',
                        headers:{
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        body: JSON.stringify({
                            id: id
                        })
                    }).then(res => {
                        return res.json();
                    }).then(datas => {
                        if(datas.code == 0){
                            this.list[index].done = datas.data;
                        }else{
                            alert(datas.msg)
                        }
                    })
                },
                // 增加
                add () {
                    fetch('/add',{
                        method:'post',
                        headers:{
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        body: JSON.stringify({
                            title: this.addInpVal
                        })
                    }).then(res => {
                        return res.json();
                    }).then(datas => {
                        if(datas.code == 0){
                            this.list.push(datas.data);
                        }else{
                            alert(datas.msg)
                        }
                    })
                },
                remove (id,index) {
                    fetch('/remove',{
                        method:'post',
                        headers:{
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        body: JSON.stringify({
                            id: id
                        })
                    }).then(res => {
                        return res.json();
                    }).then(datas => {
                        if(datas.code == 0){
                            this.list.splice(index,1);
                        }else{
                            alert(datas.msg)
                        }
                    })
                }
            }
        });
    </script>
</body>
</html>